<template>
    <el-form :model="courseCategoryInfo" label-position="top" v-loading="loading" ref="formRefs" :rules="rules">
        <el-row :gutter="30">
            <el-col :span="8">
                <el-form-item size="large" :label="$t('course.category.edit.label_1')" prop="name">
                    <el-input v-model="courseCategoryInfo.name" :placeholder="$t('course.category.edit.label_1_placeholder')" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item size="large" :label="$t('course.category.edit.label_2')" prop="parent_id">
                    <el-tree-select v-model="courseCategoryInfo.parent_id" :data="categoryList" :props="defaultProps" :placeholder="$t('course.category.edit.label_2_placeholder')" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item size="large" :label="$t('course.category.edit.label_3')" prop="cate_id_num">
                    <el-input v-model="courseCategoryInfo.cate_id_num" :placeholder="$t('course.category.edit.label_3_placeholder')" />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item size="large" :label="$t('course.category.edit.label_4')" prop="description">
                    <RichTextEditor v-model="courseCategoryInfo.description" @update-richValue="courseCategoryInfo.description = $event" />
                </el-form-item>
            </el-col>
            <el-col :span="24" class="btn-list">
                <el-button color="#f06423" @click="handleSave(false)">{{ $t('golbal.btn_text_1') }}</el-button>
                <el-button color="#f06423" @click="handleSave(true)">{{ $t('golbal.btn_text_2') }}</el-button>
                <el-button color="#f06423" @click="goPage(`/console/course/category`)">{{ $t('golbal.btn_text_3') }}</el-button>
            </el-col>
        </el-row>
    </el-form>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { FormInstance } from 'element-plus'

import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'

import RichTextEditor from '@/components/RichTextEditor.vue'

import CourseCategoryService from '@/api/courseCategory'
import type { CourseCategoryCreateItem, CourseCategoryItem } from '@/types/courseCategory'
import { goPage } from '@/utils/global'

const route = useRoute()
const router = useRouter()
const id = computed(() => Number(route.params.id))
const parentId = computed(() => Number(route.query.parentId))
const loading = ref(false)
const { t } = useI18n<{ message: MessageSchema }, SupportedLocales>()

const courseCategoryInfo = ref<CourseCategoryCreateItem>({
    name: '',
    description: '',
    parent_id: null,
    cate_id_num: '',
})
function getCourseCategoryInfo() {
    loading.value = true
    CourseCategoryService.getById(id.value)
        .then(res => {
            courseCategoryInfo.value = res
            console.log(res)
        })
        .finally(() => {
            loading.value = false
        })
}

// 表單事件
const formRefs = ref<FormInstance>()
const rules = {
    name: [{ required: true, message: t('course.category.edit.label_1_msg'), trigger: 'blur' }],
    cate_id_num: [{ required: true, message: t('course.category.edit.label_3_msg'), trigger: 'blur' }],
}
const handleSave = (isSaveAndReturn: boolean) => {
    formRefs.value?.validate(valid => {
        if (valid) {
            loading.value = true
            if (id.value) {
                CourseCategoryService.update(courseCategoryInfo.value)
                    .then(res => {
                        if (isSaveAndReturn) goPage(`/console/course/category`)
                    })
                    .finally(() => {
                        loading.value = false
                    })
            } else {
                CourseCategoryService.create(courseCategoryInfo.value)
                    .then(res => {
                        if (isSaveAndReturn) {
                            goPage(`/console/course/category`)
                        } else {
                            courseCategoryInfo.value.id = res.id
                            router.replace({
                                name: 'courseCategoryEdit',
                                params: { id: res.id },
                            })
                        }
                    })
                    .finally(() => {
                        loading.value = false
                    })
            }
        }
    })
}

// 课程分类列表
const categoryList = ref<CourseCategoryItem[]>([])
const defaultProps = {
    children: 'children',
    label: 'name',
    value: 'id',
}
function getCategoryList() {
    CourseCategoryService.list().then(res => {
        categoryList.value = res.items
        console.log(parentId.value)
        // courseCategoryInfo.value.parent_id = parentId.value || null
    })
}

onMounted(() => {
    getCategoryList()
    if (id.value) getCourseCategoryInfo()
})
</script>

<style lang="less" scoped>
.btn-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
</style>
